<!-- 首页 -->
<template>
	<view style="padding-bottom: 100px;">
		<view class="coin-tip" v-if="vuex_coin_tip">{{vuex_coin_tip}}</view>
		<view class="coin-box">
			<view class="coin-top">
				<view class="amount">账号余额：{{vuex_amount}} 趣豆</view>
				<view class="record" @click="record">收支详情</view>
			</view>
			<view class="vip-tab-box" @click="toVip" v-if="platform != 'ios'">
				<view>开通会员</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="label">充值: {{value*unit}}趣豆(1元=100趣豆)</view>
			<u-slider v-if="slider" v-model="value" block-width="80" height="40" min="10" step="10" max="100"></u-slider>
		</view>
		<view class="confrim-btn" v-if="platform != 'ios'">
			<u-button size="medium" @click="cannel">取消</u-button>
			<u-button size="medium" v-if="vuex_tuan == '1'" type="primary" @click="handleTuan">拼团</u-button>
			<u-button size="medium" type="primary" @click="handleHot">充值</u-button>
		</view>
		<view class="ad-btn-box">
			<u-button type="primary" class="ad-btn" :custom-style="customStyle" @click="moreTask">免费领取趣豆</u-button>
		</view>
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	props: {
		slider: {
			type: Boolean,
			required: true,
			default: function() {
				return false;
			}
		},
		applyId: {
			// 动态数据
			type: String,
			required: true,
			default: function() {
				return '';
			}
		},
		platform: {
			// 动态数据
			type: String,
			required: true,
			default: function() {
				return 'android';
			}
		},
	},
	data() {
		return {
			unit: 200,
			show: false,
			value: 10,
			status: 'loadmore',
			isEnd: false,
			current: 1,
			pageSize: 10,
			scrollTop: 0,
			dataList: [],
			customStyle: {
				display: 'flex',
				flex: '1',
				background: '#649f40',
			},
		};
	},
	computed: {
		...mapState(['vuex_coin_tip','vuex_amount','vuex_tuan']),
	},
	methods: {
		cannel() {
			this.$emit('cannel');
		},
		record() {
			this.$u.route({
				url: 'packgeMine/pages/me/coin',
			});
		},
		toVip() {
			this.cannel();
			this.$u.route({
				url: 'packgeMine/pages/me/vip',
			});
		},
		handleTuan() {
			this.$u.route({
				url: 'pages/index/tuan',
				params: {
					my: 'true',
				}
			});
		},
		moreTask() {
			this.$u.route({
				url: 'pages/me/step/task',
				params: {
					my: 'true',
				}
			});
		},
		handleHot() {
			var coinNum = this.value * this.unit;
			this.$u.post('/pay/coin/payNum',{
				coinNum: coinNum,
				appId: this.website.appId,
			}).then(res => {
				var that = this;
				uni.requestPayment({ 
					provider: 'wxpay',
					timeStamp: res.data.timeStamp,
					nonceStr: res.data.nonceStr,
					package: res.data.packageValue,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
							icon:'success',
							duration: 2000
						});
						that.$emit('ok');
					},
					fail: function(err) {
						uni.showModal({
							title: '温馨提示',
							content: '订单尚未支付',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									
								}
							}
						});
					}
				});
			});
			
		},
	}
}; 
</script>
<style lang="scss" scoped>
	.label {
		margin-bottom: 15px;
		font-size: 14px;
		font-weight: bold;
	}
	.amount {
		font-size: 30rpx;
		font-weight: bold;
	}
	.coin-box {
		padding: 15px;
	}
	.coin-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
	}
	.record {
		font-size: 20rpx;
		line-height: 20px;
		color: #303133;
		background: #c0c4cc;
		padding: 3px 10px;
		border-radius: 3px;
		font-weight: bold;
	}
	.coin-tip {
		font-size: 28rpx;
		color: red;
		font-weight: bold;
		padding: 15px;
		display: flex;
		justify-content: center;
		background: #ffeaea;
	}
	.confrim-btn {
		padding: 15px;
		display: flex;
		justify-content: space-between;
	}
	.ad-btn-box {
		padding: 15px;
		display: flex;
		justify-content: center;
		flex: 1;
	}
	.ad-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: btnScaleAni 3.5s infinite;
	}
	.vip-tab-box {
		display: flex;
		align-items: center;
		padding: 20px 15px;
		justify-content: space-between;
		margin-bottom: 15px;
		background-image: linear-gradient(180deg, #f9a470, #db854e);
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
	}
	
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
</style>
